<style lang="less"></style>
<template>
  <div>
    <Modal
      :title="modalTitle"
      v-model="modalVisible"
      :mask-closable="false"
      :width="500"
      :styles="{ top: '100px' }"
      @on-cancel="hideModal"
    >
      <Form ref="fibreForm" :model="fibreForm" :label-width="140" :rules="rulesForm">
        <Form-item label="光缆名称" prop="fibreName">
          <Input
            type="text"
            v-model="fibreForm.fibreName"
            clearable
            placeholder="请输入光缆名称"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="光缆级别" prop="fibreLevel">
          <Select v-model="fibreForm.fibreLevel" style="width: 300px;">
            <Option
              v-for="item in fibreLevelList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="缆段类型" prop="fibreType">
          <Select v-model="fibreForm.fibreType" style="width: 300px;">
            <Option
              v-for="item in fibreTypeList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="光缆芯数" prop="corenum">
          <InputNumber
            v-model="fibreForm.corenum"
            clearable
            placeholder="请输入光缆芯数"
            style="width: 300px;"
          />
        </Form-item>

        <Form-item label="光缆型号" prop="fibreModel">
          <Input
            type="text"
            v-model="fibreForm.fibreModel"
            clearable
            placeholder="请输入光缆型号"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="光缆长度（km）" prop="length">
          <InputNumber
            v-model="fibreForm.length"
            clearable
            placeholder="请输入光缆长度"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="投运时间" prop="operationDate">
          <Input
            type="text"
            v-model="fibreForm.operationDate"
            clearable
            placeholder="请选择投运时间"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="供应商" prop="supplier">
          <Input
            type="text"
            v-model="fibreForm.supplier"
            clearable
            placeholder="请输入供应商"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="备注" prop="remark">
          <Input
            type="textarea"
            v-model="fibreForm.remark"
            clearable
            placeholder="请输入备注"
            style="width: 300px;"
          />
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="text" @click="hideModal">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getFibreInfo, addFibre, editFibre } from "@/api/fibre";
import { latLng } from "leaflet";

import util from "@/libs/util.js";

export default {
  name: "fibre-form",
  components: {},
  props: {
    fibreModalVisible: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    modalType: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    equipmentroomId: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    fibreId: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },

  data() {
    return {
      modalVisible: false,
      fibreLevelList: [
        { value: 1, label: "一级" },
        { value: 2, label: "二级" },
        { value: 3, label: "三级" },
        { value: 4, label: "四级" }
      ],
      fibreTypeList: [
        { value: 1, label: "OPG" },
        { value: 2, label: "ADSS" },
        { value: 3, label: "OPSC" },
        { value: 4, label: "普缆" }
      ],
      fibreForm: {
        fibreId: "",
        fibreName: "",
        fibreLevel: "",
        fibreType: "",
        fibreModel: "",
        corenum: "",
        length: "",
        operationDate: "",
        supplier: "",
        remark: ""
      },
      rulesForm: {
        fibreName: [
          {
            required: true,
            message: "光缆名称不能为空",
            trigger: "blur"
          }
        ],
        fibreLevel: [
          {
            required: true,
            message: "光缆级别必选",
            trigger: "change",
            type: "number"
          }
        ],
        fibreType: [
          {
            required: true,
            message: "光缆类型必选",
            trigger: "change",
            type: "number"
          }
        ],
        fibreModel: [
          {
            required: true,
            message: "光缆型号不能为空",
            trigger: "blur"
          }
        ],
        corenum: [
          {
            required: true,
            message: "光缆芯数不能为空",
            trigger: "blur",
            type: "number"
          }
        ]
      },
      submitLoading: false
    };
  },
  computed: {
    modalTitle() {
      return this.modalType == 0 ? "添加光缆" : "修改光缆";
    }
  },
  watch: {
    fibreModalVisible(newVal, oldVal) {
      if (newVal) {
        this.modalVisible = newVal;

        if (this.modalType == 1) {
          this.edit();
        } else {
          this.add();
        }
      }
    }
  },
  methods: {
    init() {},
    add() {
      this.$refs.fibreForm.resetFields();
      this.fibreForm.equipmentroomId = this.equipmentroomId;
    },
    edit() {
      this.$refs.fibreForm.resetFields();
      getFibreInfo({ fibreId: this.fibreId }).then(
        res => {
          if (res.code == 0) {
            this.fibreForm = res.data;
          }
        },
        error => {
          console.log("submit error", JSON.stringify(error));
        }
      );
    },

    /**
     * 提交新增Fibre
     * @param newForm
     */
    submit() {
      if (this.modalType == 0) {
        this.$refs.fibreForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.fibreForm);
            console.log("submit", obj);
            addFibre(this.fibreForm).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("新增成功");
                  this.hideModal();
                  this.$emit("updateDeviceTree");
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      } else {
        this.$refs.fibreForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.fibreForm);
            editFibre(obj).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("编辑成功");
                  this.$emit("updateDeviceTree");
                  this.hideModal();
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      }
    },
    hideModal() {
      this.modalVisible = false;
      this.$emit("hideFibreModal");
    }
  },
  mounted() {
    this.init();
  }
};
</script>
